<template>
    <view class="container">
        <!-- 顶部导航 -->
        <view class="header">
          <!--  <view class="back" @click="navigateBack">
                <uni-icons type="left" size="24" color="#333"></uni-icons>
            </view> -->
            <view class="title">报名信息确认</view>
        </view>
        
        <!-- 进度指示器 -->
        <view class="progress-container">
            <view class="progress-bar">
                <view :class="activeIndex >= 1 ?'active':''" class="progress-step">
                    <view class="step-icon">1</view>
                    <view class="step-text">填写信息</view>
                </view>
                <view :class="activeIndex >= 2?'active':''" class="progress-line "></view>
                <view :class="activeIndex >= 2?'active':''" class="progress-step ">
                    <view class="step-icon">2</view>
                    <view class="step-text">确认信息</view>
                </view>
                <view :class="activeIndex == 3?'active':''" class="progress-line"></view>
                <view :class="activeIndex == 3?'active':''" class="progress-step">
                    <view class="step-icon">3</view>
                    <view class="step-text">支付费用</view>
                </view>
            </view>
        </view>
        
        <!-- 报名信息卡片 -->
		<view v-if="activeIndex == 1" style="padding: 0 30rpx;">
			<view class="info-card" >
				<view class="card-title">填写信息</view>
				<view class="info-item">
				    <view class="item-label">姓名</view>
				    <view class="item-value">
						<input placeholder="请输入" v-model="form.name"/>
					</view>
				</view>
				<view class="info-item">
				    <view class="item-label">身份证号</view>
				    <view class="item-value">
						<input placeholder="请输入" v-model="form.idCard"/>
					</view>
				</view>
				<view class="info-item">
				    <view class="item-label">手机号</view>
				    <view class="item-value">
						<view class="item-value">
							<input placeholder="请输入" v-model="form.phone"/>
						</view>
					</view>
				</view>
				
			</view>
			<view class="info-card">
				<view class="card-title">驾校信息</view>
				<view class="info-item">
					<view class="item-label">驾校</view>
					<view class="item-value">
						<view class="item-value">
							{{form.school_name}}
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">科目</view>
					<view class="item-value">
						<picker
							mode="selector" 
							:range="colleges" 
							:value="collegeIndex" 
							@change="onCollegeChange"
						>
							<view class="picker-view">
							  {{ colleges[collegeIndex] || '请选择科目' }}
							</view>
					  </picker>
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">套餐</view>
					<view class="item-value">
						<picker
							mode="selector" 
							:range="collegesType" 
							:value="collegeIndexType" 
							@change="onCollegeChangeType"
						>
							<view class="picker-view">
							  {{ collegesType[collegeIndexType] || '请选择套餐' }}
							</view>
					  </picker>
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">金额</view>
					<view class="item-value">
						<view class="course-price">
							￥{{Prices || 0.00}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="submit-btn" @click="submitRepair">
			  下一步
			</view>
		</view>
		
        <view v-if="activeIndex == 2" style="padding: 0 30rpx;">
			<view class="info-card" >
			    <view class="card-title">学员信息</view>
			    <view class="info-item">
			        <view class="item-label">姓名</view>
			        <view class="item-value">{{form.name}}</view>
			    </view>
			    <view class="info-item">
			        <view class="item-label">身份证号</view>
			        <view class="item-value">{{ form.idCard }}</view>
			    </view>
			    <view class="info-item">
			        <view class="item-label">手机号</view>
			        <view class="item-value">{{ form.phone }}</view>
			    </view>
			  
			</view>
			
			<!-- 选择课程卡片 -->
			<view class="info-card" >
				<view class="card-title">报考信息</view>
			    <view class="info-item">
					<view class="item-label">驾校</view>
					<view class="item-value">
						<view class="item-value">
							<input placeholder="请输入" v-model="form.phone"/>
						</view>
					</view>
				</view>
			    <view class="info-item">
			        <view class="item-label">费用</view>
			        <view class="item-value">¥{{ Prices }}</view>
			    </view>
			    <view class="info-item">
			        <view class="item-label">班型</view>
			        <view class="item-value">{{ collegesType[collegeIndexType] }}</view>
			    </view>
			    <!-- <view class="info-item">
			        <view class="item-label">教练</view>
			        <view class="item-value">{{ form.coachName }}</view>
			    </view> -->
			    <view class="info-item">
			        <view class="item-label">培训车型</view>
			        <view class="item-value">{{ form.carType === 'C1' ? 'C1(手动挡)' : 'C2(自动挡)' }}</view>
			    </view>
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view style="width: 40%;background: #e2e2e2;color: #333;" class="submit-btn" @click="activeIndex = 1">
				  上一步
				</view>
				<view style="width: 40%;" class="submit-btn" @click="save">
				  确认信息
				</view>
			</view>
		</view>
        
        <!-- 费用明细卡片 -->
		<view style="padding: 0 30rpx;" v-if="activeIndex == 3">
			<view class="info-card" >
				<view class="info-item">
					<view class="item-label">订单号</view>
					<view class="item-value">{{ order.order_no }}</view>
				</view>
				<view class="info-item">
					<view class="item-label">创建时间</view>
					<view class="item-value">{{formattedTime(order.create_time) }}</view>
				</view>
				<view class="info-item">
					<view class="item-label">费用</view>
					<view class="course-price item-value">¥{{ Prices }}</view>
				</view>
				
				<view class="info-item border-none">
					<view class="item-label font-bold">总计</view>
					<view class="item-value font-bold">¥{{ Prices }}</view>
				</view>
			</view>
			
		</view>
        
        
        <!-- 优惠信息 -->
        <view class="discount-card" v-if="false">
            <view class="card-title">优惠信息</view>
            <view class="discount-info">
                <view class="discount-icon">
                    <uni-icons type="discount" size="24" color="#FF5A5F"></uni-icons>
                </view>
                <view class="discount-text">
                    <view class="discount-name">{{ form.discountName }}</view>
                    <view class="discount-amount">-¥{{ form.discount.toFixed(2) }}</view>
                </view>
            </view>
        </view>
        
        <!-- 协议确认 -->
<!--        <view class="agreement">
            <uni-checkbox-group v-model="form.agree">
                <label class="checkbox-label">
                    <uni-checkbox :value="true" :custom-style="{width: '20px', height: '20px'}" color="#FF5A5F"></uni-checkbox>
                    <view class="agreement-text">我已阅读并同意<a href="javascript:void(0)" @click="showAgreement">《驾校报名协议》</a>和<a href="javascript:void(0)" @click="showPrivacy">《隐私政策》</a></view>
                </label>
            </uni-checkbox-group>
        </view> -->
        
        <!-- 底部操作栏 -->
		
        <view class="footer" v-if="activeIndex == 3">
            <view class="total-price">
                <view class="price-text">应付总额：</view>
                <view class="price-amount">¥{{ order.total_fee }}</view>
            </view>
            <view class="pay-btn " @click="confirmRegistration" >
                确认报名并支付
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			activeIndex:1,
			activeData:[],
			colleges:['C1','C2'],
			collegeIndex:0,
			collegesType:[],
			collegeIndexType:'',
            form: {
                name: '',
                idCard: '',
                phone: '',
                gender: 'male',
                courseName: '',
                price: '',
                carType: 'C1',
				school_name:''
            },
			school_id:'',
			c:'C1',
			list:[],
			payment:{},
			order:{}
        }
    },
    computed: {
        totalPrice() {
            return this.form.price;
        },
		Prices(){
			return this.form.price
		}
    },
	onLoad(option) {
		console.log('打印上个页面传过来的值',option)
		this.school_id = option.id
		this.form.school_name = option.name
		this.getdspackage()
	},
    methods: {
		formattedTime(time){
			const date = new Date(time * 1000); // 时间戳需乘以 1000（秒 → 毫秒）
			const formattedTime = date.toLocaleString('zh-CN', {
			    timeZone: 'Asia/Shanghai',
			    year: 'numeric',
			    month: '2-digit',
			    day: '2-digit',
			    hour: '2-digit',
			    minute: '2-digit',
			    second: '2-digit',
			    hour12: false
			});
			return formattedTime
		},
		//统一下单
		async save(){
			const params = {
				student_name:this.form.name,
				student_phone:this.form.phone,
				student_idcard:this.form.idCard,
				course_type:this.form.carType,
				school_id:this.school_id,
				total_fee:this.form.price,
				// total_fee:0.01,
				school_name:this.form.school_name
			}
			const res = await this.$api.post('/Payment/createOrder',params,true)
			if(res.data.code === 200) {
				console.log('打印支付参数',res.data)
				this.activeIndex = 3
				this.payment = res.data.data
				this.payData = res.data.data;
				this.order = res.data.data.order
				
			}
		},
		//价格套餐表
		async getdspackage(){
			this.collegesType = []
			this.collegeIndexType = ''
			const res = await this.$api.get('/Package/index',{school_id:this.school_id,car_type:this.form.carType},true)
			if(res.data.code === 200) {
				res.data.data.list.forEach(item => {
					this.collegesType.push(item.name)
				})
				this.list = res.data.data.list
			}
		},
		onCollegeChange(e){
			this.collegeIndex = e.target.value;
			this.form.carType = this.colleges[this.collegeIndex];
			this.getdspackage()
		},
		onCollegeChangeType(e){
			this.collegeIndexType = e.target.value;
			this.form.price = this.list[this.collegeIndexType].price;
			console.log('====',this.form.price)
		},
        // 返回上一页
        submitRepair() {
			if(!this.form.name) return uni.showToast({title:'请填写姓名',icon:'none'})
			if(!this.form.idCard) return uni.showToast({title:'请填写身份证号',icon:'none'})
			if(!this.form.phone) return uni.showToast({title:'请填写手机号',icon:'none'})
			if(this.form.price<=0) return uni.showToast({title:'请选择套餐',icon:'none'})
            this.activeIndex  = 2
        },
        
        // 显示协议
        showAgreement() {
            uni.navigateTo({
                url: '/pages/agreement/registration'
            });
        },
        
        // 显示隐私政策
        showPrivacy() {
            uni.navigateTo({
                url: '/pages/agreement/privacy'
            });
        },
        
        // 确认报名
        async confirmRegistration() {
            
            
            // // 显示加载提示
            uni.showLoading({
                title: '正在唤起支付...',
                mask: true
            });
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: this.payData.pay.timeStamp,
				nonceStr: this.payData.pay.nonceStr,
				package: this.payData.pay.package,
				signType: this.payData.pay.signType,
				paySign: this.payData.pay.paySign,
				success: (res) => {
					console.log('支付成功', res);
					uni.hideLoading()
					uni.showToast({ title: '支付成功', icon: 'success' });
					// 跳转到订单页
					uni.navigateTo({ url: '/pages/mine/order/detail?id='+this.order.order_no });
				},
				fail: (err) => {
					console.error('支付失败', err);
					uni.hideLoading()
					uni.showToast({ title: '支付失败', icon: 'none' });
				}
			});
            
            // // 模拟API请求
            // setTimeout(() => {
            //     uni.hideLoading();
                
            //     // 跳转到支付页面
            //     uni.navigateTo({
            //         url: `/pages/payment/index?orderId=${Math.random().toString(36).substr(2, 10)}&amount=${this.totalPrice}`
            //     });
            // }, 1500);
        }
    }
}
</script>

<style lang="scss">
.container {
    background-color: #F7F7F7;
    min-height: 100vh;
}

.header {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    
    .back {
        width: 60rpx;
    }
    
    .title {
        flex: 1;
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.progress-container {
    padding: 40rpx 30rpx;
    background-color: #fff;
    
    .progress-bar {
        display: flex;
        align-items: center;
        
        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            
            .step-icon {
                width: 40rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                border-radius: 50%;
                background-color: #FF5A5F;
                color: #fff;
                font-size: 24rpx;
            }
            
            .step-text {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #FF5A5F;
            }
            
            &:not(.active) {
                .step-icon {
                    background-color: #E5E5E5;
                    color: #999;
                }
                
                .step-text {
                    color: #999;
                }
            }
        }
        
        .progress-line {
            flex: 1;
            height: 2rpx;
            background-color: #FF5A5F;
            
            &:not(.active) {
                background-color: #E5E5E5;
            }
        }
    }
}

.info-card {
    background-color: #fff;
    margin: 20rpx 0;
    padding: 30rpx;
    border-radius: 15rpx;
    .card-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
    }
    
    .info-item {
        display: flex;
        align-items: center;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #eee;
        
        .item-label {
            width: 200rpx;
            font-size: 28rpx;
            color: #666;
        }
        
        .item-value {
            flex: 1;
            font-size: 28rpx;
            color: #333;
            text-align: right;
        }
        
        &.border-none {
            border-bottom: none;
        }
        
        &.font-bold {
            .item-label, .item-value {
                font-weight: bold;
                color: #FF5A5F;
            }
        }
    }
    
    .course-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25rpx 0;
        
        .course-name {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
        }
        
       
    }
}
.course-price {
	font-size: 30rpx;
	font-weight: bold;
	color: #FF5A5F;
}
.discount-card {
    background-color: #fff;
    margin: 20rpx 0;
    padding: 30rpx;
    
    .card-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
    }
    
    .discount-info {
        display: flex;
        align-items: center;
        padding: 25rpx 0;
        
        .discount-icon {
            margin-right: 20rpx;
        }
        
        .discount-text {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .discount-name {
                font-size: 28rpx;
                color: #333;
            }
            
            .discount-amount {
                font-size: 28rpx;
                color: #FF5A5F;
            }
        }
    }
}

.agreement {
    padding: 20rpx 30rpx;
    font-size: 24rpx;
    
    .agreement-text {
        color: #666;
        
        a {
            color: #FF5A5F;
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    
    .total-price {
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 30rpx;
        
        .price-text {
            font-size: 28rpx;
            color: #333;
        }
        
        .price-amount {
            margin-left: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #FF5A5F;
        }
    }
    
    .pay-btn {
        width: 280rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        background-color: #FF5A5F;
        color: #fff;
        font-size: 32rpx;
        
        &.disabled {
            background-color: #E5E5E5;
            color: #999;
        }
    }
}
</style>    